<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>您正在做的业务是:</el-breadcrumb-item>
      <el-breadcrumb-item>产品设计</el-breadcrumb-item>
      <el-breadcrumb-item>产品物料组成设计</el-breadcrumb-item>
      <el-breadcrumb-item>物料组成设计单查询</el-breadcrumb-item>
    </el-breadcrumb>
    <!--  根据条件查询-->
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="选择一级种类名称:">
          <el-select v-model="pid,value" placeholder="选择一级种类" @change="changeLevel2(value)">
            <el-option value='' label="请选择"></el-option>
            <el-option @click.native="getPid(item.pid)"
                       v-for="item in fileKind"
                       :key="item.id"
                       :label="item.kindName"
                       :value="item.id">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="选择二级种类名称:" v-if="fileKind2!=null&&fileKind2!=''">
          <el-select v-model="value2" placeholder="选择二级种类" @change="changeLevel3(value2)">
            <el-option value='' label="请选择"></el-option>
            <el-option
                v-for="item in fileKind2"
                :key="item.id"
                :label="item.kindName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择三级种类名称:" v-if="fileKind3!=null&&fileKind3!=''">
          <el-select v-model="value3" placeholder="选择三级种类">
            <el-option value='' label="请选择"></el-option>
            <el-option
                v-for="item in fileKind3"
                :key="item.id"
                :label="item.kindName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设计单审核状态:">
          <el-select v-model="checkStatu" placeholder="设计单审核状态">
            <el-option value='' label="请选择"></el-option>
            <el-option
                v-for="item in moduleStatu"
                :key="item.value"
                :label="item.name"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称:">
          <el-input v-model="productName" placeholder="产品名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="init">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--编号,产品编号,产品名称,设计单状态,审核状态  -->
    <div>
      <el-table
          :data="moduleData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="id"
            label="设计单编号"
            @click="handleClick(scope.row)"
            width="180">
        </el-table-column>
        <el-table-column
            prop="productId"
            label="产品编号"
            width="120">
        </el-table-column>
        <el-table-column
            prop="productName"
            label="产品名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="CHECK_TAG"
            label="审核状态"
            width="120">
          <template slot-scope="scope">
            <p v-if="moduleData[scope.$index].checkTag=='S001-0'">待审核</p>
            <p v-if="moduleData[scope.$index].checkTag=='S001-1'">通过</p>
            <p v-if="moduleData[scope.$index].checkTag=='S001-2'">不通过</p>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="medium">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--分页    -->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          :current-page="Number(pageNum)"
          :page-sizes="[2, 4, 8, 16]"
          :page-size="Number(pageSize)"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(total)">
      </el-pagination>
    </div>

    <!-- 查询详情 -->
    <el-dialog title="产品信息详情:" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <template>
        <!-- 物料清单-->
        <el-form :model="module" label-width="80px" disabled:true>

          <el-form-item label="产品名称:">
            <label v-model="module.productName">
              <b v-text="module.productName"></b>
            </label>
            <label style="position: relative;left: 300px;">产品编号:
              <b>
                <label v-model="module.productId"><b v-text="module.productId"></b></label>
              </b>
            </label>

          </el-form-item>
          <!--        <el-form-item label="设计人:">
                    <el-input v-model="form.designer" style="width: 300px;"></el-input>
                  </el-form-item>-->

          <!--        表格-->

          <!--        productId:'',-->
          <!--        productName:'',-->
          <!--        type:'',-->
          <!--        productDescribe:'',-->
          <!--        amountUnit:'',-->
          <!--        costPrice:'',-->
          <!--        amount:'',-->
          <!--        subtotal:''-->
          <div>
            <el-table
                :data="moduleDetails"
                style="width: 100%" ref="multipleTable">
              <el-table-column
                  type="index"
                  :index="indexMethod(1)">
              </el-table-column>
              <el-table-column
                  label="物料编号:"
                  width="180"
                  prop="productId">
              </el-table-column>
              <el-table-column
                  label="物料名称"
                  width="180"
                  prop="productName">
              </el-table-column>
              <el-table-column
                  label="用途类型"

                  width="180">
                <template slot-scope="scope">
                  <p v-if="moduleDetails[scope.$index].type=='Y001-1'">商品</p>
                  <p v-if="moduleDetails[scope.$index].type=='Y001-2'">物料</p>
                </template>
              </el-table-column>
              <el-table-column
                  label="描述"
                  width="180"
                  prop="productDescribe">
              </el-table-column>
              <el-table-column
                  label="数量"
                  width="180"
                  prop="amount">
              </el-table-column>
              <el-table-column
                  label="单位"
                  width="180"
                  prop="amountUnit">
              </el-table-column>
              <el-table-column
                  label="计划成本单价(元)"
                  width="180"
                  prop="costPrice">
              </el-table-column>
              <el-table-column
                  label="小计(元)"
                  width="180"
                  prop="subtotal">
              </el-table-column>
            </el-table>
          </div>

          <p><b>总价格:{{ form.costPriceSum }}</b></p>

          <el-form-item label="此产品登记人:" label-width="100px">
            <label v-model="form.register"><b>{{ form.designer }}</b></label>

            <label style="position: relative;left:300px">登记时间:
              <b>
                <label v-text="currentTime"></label>
              </b>
            </label>


          </el-form-item>
          <el-form-item label="设计要求:">
            <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                disabled="disabled"
                v-model="form.moduleDescribe">
            </el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false,module={}">返回</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import request from "../../request.js"

export default {
  name: "queryModule",
  data() {
    return {
      dialogFormVisible: false,
      activeName: 'first',
      dialogVisible: false,
      formInline: {
        user: '',
        region: ''
      },
      form: {
        /**
         * 设计ID
         */
        designId: '',
        //产品ID
        productId: '',
        //产品名
        productName: '',
        //第一种类id
        firstKindId: '',
        //第一名称
        firstKindName: '',
        //第二id
        secondKindId: '',
        //第二名称
        secondKindName: '',
        //第三id
        thirdKindId: '',
        //第三名称
        thirdKindName: '',
        //设计者
        designer: '',
        //设计要求
        moduleDescribe: '',
        //成本价格总和
        costPriceSum: '',
        //登记人
        register: '',
        //当前时间
        currentTime: ''
      },
      currentTime: '',
      pid: '',
      value: '',
      value2: '',
      value3: '',
      fileKind: [],
      fileKind2: [],
      fileKind3: [],
      moduleStatu: [{name: '等待', value: 'S001-0'}, {name: '通过', value: 'S001-1'}, {name: '不通过', value: 'S001-2'}],
      //查询数据
      pageNum: '',
      pageSize: '',
      checkStatu: '',
      total: '',
      productName: '',
      //初始化展示数据
      moduleData: [],
      moduleDataDetail: [],
      titleMsg: '制定物料组成设计单',
      module: {},
      moduleDetails: []
    }
  }, methods: {
    indexMethod(index) {
      return index + 1;
    },
    getDate() {
      var date = new Date();
      this.form.currentTime = date;
      console.log(date)
      var s = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
      return s;
    },
    handleClick(row) {
      this.currentTime = this.getDate();
      console.log(row);
      axios.get("http://localhost:8150/module/queryModuleById", {
        params: {
          'id': row.productId
        }
      }).then(resp => {
        console.log(resp.data.data)
        this.form.designer = row.designer;
        this.form.costPriceSum = row.costPriceSum;
        this.module = resp.data.data.module;
        this.moduleDetails = resp.data.data.list;
        let statu = '';
        if (row.checkTag === 'S001-0') {
          statu = '等待'
        } else if (row.checkTag === 'S001-1') {
          statu = '通过'
        } else {
          statu = '不通过'
        }
        this.titleMsg = "设计单编号" + row.id + ",其中审核状态:" + statu;
        this.dialogVisible = true;
      }).catch(e => {
        alert("错误信息为:" + e)
      })
      //this.dialogVisible = true;
    },
    //初始化数据
    init() {
      axios.get("http://localhost:8150/module/queryModule", {
        params: {
          'productName': this.productName,
          'firstId': this.value,
          'secondId': this.value2,
          'threeId': this.value3,
          'pageNum': this.pageNum,
          'pageSize': this.pageSize,
          'checkTag': this.checkStatu
        }
      }).then(data => {
        if (data.data.flag==false) {
          this.$message({
            showClose: true,
            message: data.data.message,
            type: data.data.flag == true ? "success" : "error"
          })
          return;
        }
        this.moduleData = data.data.data.records;
        this.pageNum = data.data.data.current;
        this.pageSize = data.data.data.size;
        this.total = data.data.data.total;
      }).catch(e => {
        alert("错误信息为:" + e)
      })
    },
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`每页 ${val} 条`);
      this.init();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      console.log(`当前页: ${val}`);
      this.init();
    },
    changeLevel2(id) {

      console.log("value:" + id)
      let a = 0;
      for (let i = 0; i < this.fileKind.length; i++) {
        for (let j = 0; j < this.fileKind[i].list.length; j++) {
          if (id === this.fileKind[i].list[j].pid) {
            this.fileKind2[a] = this.fileKind[i].list[j];
            a++;
          } else {
            this.fileKind2 = [];
            this.fileKind3 = [];
            this.value2 = '';
            this.value3 = '';
          }
        }

      }
    }, changeLevel3(id) {
      //  console.log(id)
      let a = 0;

      for (let i = 0; i < this.fileKind2.length; i++) {
        for (let j = 0; j < this.fileKind2[i].list.length; j++) {
          if (id == this.fileKind2[i].list[j].pid) {
            console.log(this.fileKind2[i].list[j].pid)
            this.fileKind3[a] = this.fileKind2[i].list[j];
            a++;
          } else {
            this.fileKind3 = [];
            this.value3 = '';
          }
        }
      }
    }, getPid(id) {
      this.pid = id;
    },//获取下拉框的值
    getSelectValue() {
      axios.get("http://localhost:8150/config-file-kind/displayType").then(data => {
        this.fileKind = data.data.data;
      }).catch(e => {
        alert("错误信息为:" + e)
      });
    }, handleClose() {
      this.fileDataDetail = {};
      this.dialogVisible = false;
    },
    handleClick2(tab, event) {
      //  console.log(tab, event);
    },
    handleDialogClose() {
      this.moduleData = [];
      this.dialogFormVisible = false;
    }
  }, created() {
    this.getSelectValue();
    this.init();
  }
}
</script>

<style scoped>

</style>